<template>
  <div id="qrcodelist"> 


          <el-table :data="qrdata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

               
                <el-table-column label="名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="头像"  align='center' >                   
                    <template slot-scope="scope">                   
                       <img  style="width: 30px; height: 30px" :src="urlimg + scope.row.icon" /> 
                    </template>
                </el-table-column>
                 <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="微信"  align='center' >                   
                    <template slot-scope="scope">                   
                       <el-image v-if="scope.row.srcListwx"
                            style="width: 30px; height: 30px"
                            :src="urlimg + scope.row.srcListwx" 
                            :preview-src-list="scope.row.srcListwxarr" class="imga">
                        </el-image>
                         <span v-else>暂未上传</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付宝"  align='center' >                   
                     <template slot-scope="scope">                   
                       <el-image v-if="scope.row.srcListzfb"
                            style="width: 30px; height: 30px"
                            :src="urlimg + scope.row.srcListzfb" 
                            :preview-src-list="scope.row.srcListzfbarr" class="imga">
                        </el-image>
                         <span v-else>暂未上传</span>
                    </template>
                </el-table-column>

                  <el-table-column label="操作" align='center' width="300px">
                    <template slot-scope="scope">
                        <el-button  v-if="qrdata.length != 1"  size="mini"  type="primary"  plain @click="delect_but(scope.row,'delect')">删除</el-button> 
                        <el-button   size="mini"  type="primary"  plain @click="xg_but(scope.row,'xg')">修改</el-button> 
                    </template>
                </el-table-column>
              


  
            </el-table>  



             <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
   </el-dialog>



       <!-- 修改承接二维码 -->
    <el-dialog title="修改承接二维码" :visible.sync="xg_mtk"  width="600px">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="60px" style="width:100%;">
    
             <el-form-item label="标题">
                    <el-input    v-model="mtk_form.title" placeholder="标题"></el-input>
              </el-form-item> 
              <el-form-item label="手机号">
                    <el-input    v-model="mtk_form.telphone" placeholder="手机号"></el-input>
              </el-form-item> 
              <el-form-item label="姓名">
                    <el-input    v-model="mtk_form.username" placeholder="姓名"></el-input>
              </el-form-item>

              <el-row style="width:100%;">
                     <el-col :span="12">
                        <el-form-item label="头像">
                            <el-upload 
                                  action="uploadUrl"  
                                  :show-file-list="false"   
                                  :before-upload="beforeupload2"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form2.head_img"  :src="pic_form2.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>       
                     </el-col>
                    </el-row>

               <el-row style="width:100%;">
                     <el-col :span="12">
                        <el-form-item label="微信">
                            <el-upload 
                                  action="uploadUrl"  
                                  :show-file-list="false"   
                                  :before-upload="beforeupload"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form.head_img"  :src="pic_form.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>       
                     </el-col>
                      <el-col :span="12">
                            <el-form-item label="支付宝">
                              <el-upload 
                                    action="uploadUrl"  
                                    :show-file-list="false"   
                                    :before-upload="beforeupload1"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form1.head_img"  :src="pic_form1.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                              </el-upload>
                            </el-form-item>                         
                      </el-col>
                    </el-row>                            
        </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="xg_but_qr">确认</el-button>
            </div>

        </div> 
    </el-dialog>


     


   </div>
</template>

<script>

export default {
   name: 'qrcodelist',
   props:{
      qrdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        my_assets_id:'',
        user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
        },
        xg_mtk:false,
        mtk_form:{
            title:'',
            telphone:'',
            username:'',
        },
         pic_form:{
           head_img:'',
           upfile:'',
        },
        pic_form1:{
           head_img:'',
           upfile:'',
        },
         pic_form2:{
           head_img:'',
           upfile:'',
        },
        lx:'',
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 200
      
  },
  mounted (){
    
  },
  methods: {
  xg_but(row,lx){
 
      this.lx= lx

     this.my_assets_id = row.assets_id

     this.pic_form.upfile = row.collection_picture
     this.pic_form.head_img =  this.urlimg + row.collection_picture

     this.pic_form1.upfile = row.zfb_collection_picture
     this.pic_form1.head_img =  this.urlimg + row.zfb_collection_picture

     this.mtk_form.title = row.title
     this.mtk_form.telphone = row.telphone

     this.pic_form2.upfile = row.icon
     this.pic_form2.head_img =  this.urlimg + row.icon

     this.mtk_form.username = row.username
     this.xg_mtk = true
  },
  xg_but_qr(){
     this.user_test.user_mtk = true
  },
  xg_but_qr_fun(){
           this.post("/buy_kmb/updateQr", {
                   assets_id:this.my_assets_id,
                   weixin:this.pic_form.upfile,
                   ali:this.pic_form1.upfile,
                   title:this.mtk_form.title,
                   telphone:this.mtk_form.telphone,
                   icon:this.pic_form2.upfile,
                   username:this.mtk_form.username,
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                        this.xg_mtk = false
                        
                    }else {
                     this.open1(res.message,'warning')
                    }

              })
  },
  delect_but(row,lx){
     this.lx= lx
     this.my_assets_id = row.assets_id
     this.user_test.user_mtk = true

  },
  user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){

              switch (this.lx){
                        case 'delect':
                            this.delect_but_fun();
                            break;
                        case 'xg':
                            this.xg_but_qr_fun();
                            break;
                        default :
                            alert("参数错误");
                            break;
                        }

                
            }
        })
  
    },
  delect_but_fun(){
      this.post("/buy_kmb/delQr", {
                    assets_id:this.my_assets_id,
                }).then(res => {

              if(res.error_code == 0){
                this.open1(res.result,'success')  //提示框
                this.$emit('up_list_fun')
              }else {
                this.open1(res.message,'warning')
              }

    })
  },
    beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form.upfile = res.result.url    
            })

            return false;
     },
     beforeupload1(file){
            if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form1.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form1.upfile = res.result.url    
            })

            return false;
     },
      beforeupload2(file){
            if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form2.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form2.upfile = res.result.url    
            })

            return false;
     },
     ImgUploadSectionFile(param){//图片上传    
      },
    
 


  }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>